<template>
  <div>
    <a-row :gutter="10">
      <a-col :span="4">
        <a-select
            placeholder="请选择校区"
            ref="select"
            v-model:value="campusId"
            style="width: 120px"
            @change="handleCampusChange"
        >
          <a-select-option v-for="item in campusList" :value="item.campusId">{{ item.campusName }}</a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6">
        <a-select
            placeholder="请选择部门"
            ref="select"
            v-model:value="deptId"
            style="width: 200px"
            @change="onSearch"
        >
          <a-select-option v-for="item in deptList" :value="item.deptId">{{ item.deptName }}</a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6">
        <a-input-search
            v-model:value="username"
            placeholder="请输入用户姓名"
            enter-button
            @search="onSearch"
        />
      </a-col>
      <a-col :span="4">
        <a-button type="primary" @click="displayAddUserForm">添加用户</a-button>
      </a-col>
    </a-row>


    <!--表格区域-->
    <a-table style="margin-top: 10px" :columns="columns"
             :pagination="false"
             :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
             :data-source="userList">
      <template #headerCell="{ column }">
        <template v-if="column.key === 'username'">
        <span>
          Name
        </span>
        </template>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'username'">
          <a>
            {{ record.username }}
          </a>
        </template>
        <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag
              v-for="tag in record.tags"
              :key="tag"
              :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
        </template>
        <template v-else-if="column.key === 'action'">
          <!--操作列-->
          <span slot="action">
          <a @click="edit(record)">编辑</a>
          <a-divider type="vertical"/>

          <a-popconfirm
              v-if="userList.length"
              title="Sure to delete?"
              @confirm="() => onDelete(record)"
          >
          <a>Delete</a>
        </a-popconfirm>
        </span>
        </template>
      </template>

    </a-table>
    <a-pagination :current="currentPage"
                  :page-size="pageSize"
                  :total="total" show-less-items @change="onPageChange" />

    <user-form ref="userFormRef" :title="title"></user-form>
    <edit-user-form :rowValue="rowValue" ref="editUserFormRef" @updateUserList="updateUserList()"></edit-user-form>
  </div>
</template>

<script>
import {onBeforeMount, ref} from "vue";
import {deleteById, getUserList, search} from "@/apis/user";
import {getCampusList} from "@/apis/campus";
import {getDeptListByCampId} from "@/apis/dept";
import {message} from "ant-design-vue";
import UserForm from "@/components/user/UserForm";
import EditUserForm from "@/components/user/EditUserForm";

export default {
  name: "Users",
  components: {EditUserForm, UserForm},
  setup() {
    const columns = [{
      name: '姓名',
      dataIndex: 'username',
      key: 'username',
    }, {
      title: '校区',
      dataIndex: 'campus',
      key: 'campus',
    }, {
      title: '部门',
      dataIndex: 'dept',
      key: 'dept',
    }, {
      title: '联系电话',
      key: 'mobile',
      dataIndex: 'mobile',
    }, {
      title: '邮箱',
      key: 'email',
      dataIndex: 'email'
    },
      {
        title: '角色',
        key: 'role',
        dataIndex: 'role',
      },
      {
        title: 'Action',
        key: 'action',
      }];

    const campusId = ref();
    const deptId = ref();

    const campusList = ref([])
    const deptList = ref([])

    const userList = ref([])
    const username = ref('')
    const userFormRef = ref(null)
    const editUserFormRef = ref(null)
    const isAddUserForm = ref(false);
    const title = ref("添加用户");
    const currentPage = ref(1);
    const pageSize = ref(7);
    const total = ref(0);
    const rowValue = ref();
    const editUserFormVisible = ref(false)

    const getUsers = (page)=>{
      if (!page){
        page = 1;
      }
      getUserList(page, pageSize.value).then(res => {
        userList.value = res.data.records
        total.value = res.data.total
      })
    }

    onBeforeMount(() => {
      getUsers();

      getCampusList().then(res => {
        campusList.value = res.data;
      })
    })

    const onPageChange = () => {
      getUsers(currentPage.value)
    }

    const handleCampusChange = () => {
      username.value = ''
      deptId.value = ''
      search(campusId.value).then(res => {
        userList.value = res.data
      })
      getDeptListByCampId(campusId.value).then((res) => {
        deptList.value = res.data
      })
    };


    const onSearch = () => {
      search(campusId.value, deptId.value, username.value).then(res => {
        userList.value = res.data
      })
    }

    const displayAddUserForm = () => {
      title.value = "添加用户"
      userFormRef.value.isVisible()
    }

    const edit = row => {
      editUserFormRef.value.editUserFormVisible = true
      rowValue.value = JSON.parse(JSON.stringify(row))
      editUserFormRef.value.init(rowValue.value)
    }
    const onDelete = value => {
      deleteById(value.userId).then(res=>{
        if (res.data === true){
          getUsers(currentPage.value)
          message.success("删除用户成功")
        }
      })
    }

    const updateUserList = ()=>{
      getUsers(currentPage.value)
    }

    return {
      campusList,
      username,
      onSearch,
      userList,
      columns,
      handleCampusChange,
      campusId,
      deptList,
      deptId,
      displayAddUserForm,
      isAddUserForm,
      userFormRef,
      edit,
      onDelete,
      title,
      currentPage,
      pageSize,
      total,
      onPageChange,
      rowValue,
      editUserFormVisible,
      editUserFormRef,
      updateUserList,
    }
  },
}
</script>

<style scoped lang="less">

</style>